<template>
    <div class="item">
        <div class="short">
            <i class="pi pi-angle-right" style="padding: 4px;"
                :style="[{ visibility: item.long.length ? 'visible' : 'hidden' }, showlong ? { transform: 'rotate(90deg)' } : {}]"
                @click="showlong = !showlong"></i>
            {{ `https://cxkqun.xyz/${item.short_code}` }}
        </div>
        <div class="note">
            <InputText type="text" v-model="note.value" v-if="note.edit" style="width: 100%;" />
            <span v-else>{{ item.note }}</span>
        </div>
        <div class="count">{{ item.count }}</div>
        <div class="active">
            <Button type="button" icon="pi pi-check" severity="success" @click="updatenote()" v-if="note.edit" />
            <Button type="button" icon="pi pi-pencil" severity="warning" @click="edit()" v-else />

            <Button type="button" icon="pi pi-minus-circle" severity="warning" @click="edit()" v-if="note.edit" />
            <Button type="button" icon="pi pi-times" severity="danger" @click="deleteshort(item)" v-else />

            <Button type="button" icon="pi pi-plus" severity="info" @click="addlong(item)"/>
        </div>
    </div>
    <div v-if="showlong">
        <LongCard :long="long" v-for="(long) of item.long" :key="long.id"></LongCard>
    </div>
</template>

<script setup>
import Button from 'primevue/button';
import { defineProps, ref, inject, onMounted } from 'vue'
import InputText from 'primevue/inputtext';
import LongCard from './LongCard.vue';

// 从祖先组件中注入函数
const deleteshort = inject('deleteshort');
const addlong = inject('addlong');
const editshort = inject('editshort');

// 定义 props
const props = defineProps({
  item:Object
})

// 是否显示长链
const showlong = ref(false)

// 编辑和备注信息
const note = ref({
    value:null,
    edit:false
})

onMounted(() => [
    note.value.value = props.item.note
])

// 编辑按钮
function edit(){
    note.value.edit = !note.value.edit
}

// 修改短链备注
function updatenote(){
    const data = {
        short_code:props.item.short_code,
        note:note.value.value
    }
    editshort(data)
    note.value.edit = !note.value.edit
}

</script>

<style scoped lang="less"> 
    .item{
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #e2e8f0;
        &:hover{
            background-color: #f8fafc;
        }

        &>*{
            // flex: 1;
            width: 33%;
            height: 50px;
            line-height: 50px;
            padding-left: 10px;
            // font-weight: 500;
        }
        &>.active{
            display: flex;
            // flex: 0.5;
            width: 17%;
            align-items: center;
            &>:nth-child(1){
                margin-right: 10px;
            }
            &>:nth-child(2){
                margin-right: 10px;
            }
        }
        &>.short{
            display: flex;
            align-items: center;
            .pi{
                cursor: pointer;
                box-sizing: border-box;
                &:hover{
                    border-radius: 50%;
                    background-color: #e2e8f0;
                }
            }
        }
        &>.count{
            // flex: 0.5;
            width: 17%;
        }
    }
</style>